<script>
import outMain from "@/components/outMain.vue";
import { ElMessage, ElMessageBox } from "element-plus";
import {
  TrainingAdd,
  TrainingEdit,
  TrainingShow,
  checkSchool,
} from "@/http/api";
export default {
  components: { outMain },
  name: "",
  data() {
    const checkIntNumber = (rule, value, callback) => {
      let result = this.$ruleCheck.checkIntNumber(value);
      if (!result) {
        callback();
      } else {
        callback(new Error(result));
      }
    };
    const checkNumber = (rule, value, callback) => {
      let result = this.$ruleCheck.checkNumber(value);
      if (!result) {
        callback();
      } else {
        callback(new Error(result));
      }
    };

    return {
      detailId: this.$route.query.id,
      showStep1: true,
      showStep2: true,
      showStep3: true,
      schoolArr: [],
      typeArr: [],
      formData: {
        training_school_id: "",
        training_name: "",
        training_type: "",
        training_school_name: "",
        training_address: "",
        training_people: "",
        training_sk_time: "",
        training_ks_time: [],
        training_time: "",
        report_time: "",
        bm_money: "",
        tuition_fee_data: [
          {
            name: "培训费",
            money: "",
            content: "",
            plach: "请输入培训的具体内容",
          },
          {
            name: "考试费",
            money: "",
            content: "",
            plach: "请输入考试费说明",
          },
          {
            name: "住宿费",
            money: "",
            content: "",
            plach: "请输入住宿费说明",
          },
          {
            name: "保险费",
            money: "",
            content: "",
            plach: "请输入保险费说明",
          },
          {
            name: "教材费",
            money: "",
            content: "",
            plach: "请输入教材费说明",
          },
          {
            name: "体检费",
            money: "",
            content: "",
            plach: "请输入体检费说明",
          },
        ],
        tuition_fee_remark: "",
        bmtj: "",
        pxnr: "",
        bdxz: "",
        tbtx: "",
      },
      rules: {
        training_name: [
          {
            required: true,
            message: "请输入培训项目名称",
            trigger: "blur",
          },
        ],
        training_type: [
          {
            required: true,
            message: "请选择培训类别",
            trigger: "change",
          },
        ],
        training_school_name: [
          {
            required: true,
            message: "请选择培训学校",
            trigger: "change",
          },
        ],
        training_people: [
          {
            validator: checkIntNumber,
            required: true,
            trigger: "blur",
          },
        ],
        training_sk_time: [
          {
            required: true,
            message: "请选择开课时间",
            trigger: "change",
          },
        ],
        report_time: [
          {
            required: true,
            message: "请选择报道时间",
            trigger: "change",
          },
        ],
        training_time: [
          {
            required: true,
            message: "请输入培训时长",
            trigger: "blur",
          },
        ],
        training_ks_time: [
          {
            required: true,
            message: "请输入考试时间",
            trigger: "blur",
          },
        ],
        bm_money: [
          {
            validator: checkNumber,
            required: true,
            trigger: "blur",
          },
        ],
      },
    };
  },
  props: {},
  setup() {},
  methods: {
    async saveFn() {
      const valid = await this.$refs.ruleForm.validate();
      if (!valid) {
        return;
      }

      let result = "";

      if (this.formData.tuition_fee_data[0].content == "") {
        ElMessage({
          type: "warning",
          message: "学费信息——培训内容不能为空",
        });
        return false;
      }
      if (this.formData.tuition_fee_data[0].money == "") {
        ElMessage({
          type: "warning",
          message: "培训费不能为空",
        });
        return false;
      } else {
        result = this.$ruleCheck.checkNumber(
          this.formData.tuition_fee_data[0].money
        );
      }
      if (result) {
        ElMessage({
          type: "warning",
          message: "培训费" + result,
        });
        return false;
      }
      for (let item of this.formData.tuition_fee_data) {
        if (item != "培训费") {
          if (item.money && this.$ruleCheck.checkNumber(item.money)) {
            result = this.$ruleCheck.checkNumber(item.money);
            ElMessage({
              type: "warning",
              message: item.name + result,
            });
            return false;
          }
        }
      }
      const { data } = this.detailId
        ? await TrainingEdit(this.formData)
        : await TrainingAdd(this.formData);
      if (data.code == 1) {
        ElMessage({
          type: "success",
          message: this.detailId ? "编辑成功" : "新增成功",
        });
        setTimeout(() => {
          this.$router.back();
        }, 1000);
      }
    },
    getData() {
      TrainingShow({ training_content_id: this.detailId }).then((res) => {
        if (res.data.code == 1) {
          let resData = res.data.data;
          delete resData.training_sign_count;
          this.formData = resData;
          this.showCont = true;
        }
      });
    },
    getSchool() {
      checkSchool().then((res) => {
        if (res.data.code == 1) {
          this.schoolArr = res.data.data;
        }
      });
    },
    selectSchool(e) {
      if (e) {
        let result = this.schoolArr.filter((item) => {
          return item.school_name == e;
        });
        this.formData.training_address = result[0].school_address;
        this.formData.training_school_id = result[0].school_id;
      }
    },
    backFn() {
      this.$router.back();
    },
  },
  mounted() {},
  async created() {
    this.getSchool();
    this.typeArr = await this.$getCate.getCateFn(10);

    if (this.detailId) {
      this.getData();
    } else {
      this.showCont = true;
    }
  },
};
</script>
<template>
  <outMain>
    <div class="formCont">
      <div class="formHead">
        <div>{{ detailId ? "编辑" : "发布" }}培训信息</div>
        <btn value="返回上一级" @ok="backFn"></btn>
      </div>
      <div class="formMain">
        <el-form :rules="rules" ref="ruleForm" :model="formData">
          <div class="formHeadCont flexCont">
            <div>基本信息</div>
            <div class="headLine"></div>
            <div class="closeBtn" @click="showStep1 = !showStep1">
              {{ showStep1 ? "收起" : "展开" }}
            </div>
          </div>
          <div class="flexCont" v-show="showStep1">
            <el-form-item
              label="项目名称"
              label-width="120"
              prop="training_name"
            >
              <el-input
                clearable
                placeholder="请输入培训项目名称"
                v-model="formData.training_name"
              />
            </el-form-item>
            <el-form-item
              label="培训类别"
              label-width="120"
              prop="training_type"
            >
              <el-select
                clearable
                filterable
                v-model="formData.training_type"
                placeholder="请选择培训类别"
                style="width: 100%"
              >
                <el-option
                  v-for="item in typeArr"
                  :key="item.name"
                  :label="item.name"
                  :value="item.name"
                />
              </el-select>
            </el-form-item>
            <el-form-item
              label="培训学校"
              label-width="120"
              prop="training_school_name"
            >
              <el-select
                clearable
                filterable
                v-model="formData.training_school_name"
                placeholder="请选择培训学校"
                style="width: 100%"
                @change="selectSchool"
              >
                <el-option
                  v-for="item in schoolArr"
                  :key="item.school_name"
                  :label="item.school_name"
                  :value="item.school_name"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="报道地点" label-width="120">
              <el-input
                disabled
                placeholder="请输入报道地点(选择学校自动填充地点)"
                v-model="formData.training_address"
              />
            </el-form-item>
            <el-form-item
              label="培训人数"
              label-width="120"
              prop="training_people"
            >
              <el-input
                type="number"
                clearable
                placeholder="请输入培训人数"
                v-model="formData.training_people"
                ><template #append>人</template></el-input
              >
            </el-form-item>
            <el-form-item
              label="上课时间"
              label-width="120"
              prop="training_sk_time"
            >
              <el-date-picker
                style="width: 100%"
                clearable
                v-model="formData.training_sk_time"
                type="date"
                placeholder="请选择开课时间"
              />
            </el-form-item>
            <el-form-item
              label="考试时间"
              label-width="120"
              prop="training_ks_time"
            >
              <el-input
                clearable
                placeholder="请输入考试时间(例：学完就考)"
                v-model="formData.training_ks_time"
              />
            </el-form-item>
            <el-form-item
              label="培训时长"
              label-width="120"
              prop="training_time"
            >
              <el-input
                clearable
                placeholder="请输入培训时长(例：3-5个月左右)"
                v-model="formData.training_time"
              />
            </el-form-item>
            <el-form-item label="报道时间" label-width="120" prop="report_time">
              <el-date-picker
                style="width: 100%"
                v-model="formData.report_time"
                type="date"
                clearable
                placeholder="请选择报道时间"
              />
            </el-form-item>
            <el-form-item label="报名定金" label-width="120" prop="bm_money">
              <el-input
                placeholder="请输入报名定金"
                clearable
                v-model="formData.bm_money"
                ><template #append>元</template></el-input
              >
            </el-form-item>
          </div>
          <div class="formHeadCont flexCont">
            <div>学费信息</div>
            <div class="headLine"></div>
            <div class="closeBtn" @click="showStep2 = !showStep2">
              {{ showStep2 ? "收起" : "展开" }}
            </div>
          </div>
          <div v-show="showStep2">
            <div class="formCard">
              <div
                class="formItem"
                :key="index"
                v-for="(item, index) in formData.tuition_fee_data"
              >
                <div class="formItemName">{{ item.name }}</div>
                <el-form-item label="费用" label-width="60" prop="userName">
                  <el-input
                    clearable
                    placeholder="请输入费用"
                    v-model="item.money"
                  >
                    <template #append>元</template></el-input
                  >
                </el-form-item>
                <el-form-item label="内容" label-width="60" prop="userName">
                  <el-input
                    v-model="item.content"
                    maxlength="3000"
                    :placeholder="item.plach"
                    show-word-limit
                    :rows="4"
                    type="textarea"
                  />
                </el-form-item>
              </div>
            </div>
            <el-form-item prop="tuition_fee_remark">
              <el-input
                v-model="formData.tuition_fee_remark"
                maxlength="3000"
                placeholder="若有其他费用说明信息，请备注。"
                show-word-limit
                :rows="4"
                type="textarea"
              />
            </el-form-item>
          </div>
          <div class="formHeadCont flexCont">
            <div>其他信息</div>
            <div class="headLine"></div>
            <div class="closeBtn" @click="showStep3 = !showStep3">
              {{ showStep3 ? "收起" : "展开" }}
            </div>
          </div>
          <div class="flexCont" v-show="showStep3">
            <el-form-item label="报名条件" label-width="120">
              <el-input
                v-model="formData.bmtj"
                maxlength="3000"
                placeholder="请输入报名条件"
                show-word-limit
                :rows="4"
                type="textarea"
              />
            </el-form-item>
            <el-form-item label="培训内容" label-width="120">
              <el-input
                v-model="formData.pxnr"
                maxlength="3000"
                placeholder="请输入培训内容"
                show-word-limit
                :rows="4"
                type="textarea"
              />
            </el-form-item>
            <el-form-item label="报道须知" label-width="120">
              <el-input
                v-model="formData.bdxz"
                maxlength="3000"
                placeholder="请输入报道须知"
                show-word-limit
                :rows="4"
                type="textarea"
              />
            </el-form-item>
            <el-form-item label="特别提醒" label-width="120">
              <el-input
                v-model="formData.tbtx"
                maxlength="3000"
                placeholder="请输入特别提醒"
                show-word-limit
                :rows="4"
                type="textarea"
              />
            </el-form-item>
          </div>
          <el-form-item class="flexPull" label=" " label-width="120">
            <btn :value="detailId ? '确认编辑' : '确认发布'" @ok="saveFn"></btn>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </outMain>
</template>
<style scoped lang="less"></style>
